<template>
    <ul class="proList" :class="'cols_' + num">
        <li class="proItem" v-for="item in proList" @click="toDetail(item.proid)" :key="item.proid">
            <div class="itemImage">
                <!-- 图片 -->
                <van-image :src="item.img1" />
            </div>
            <div class="itemInfo">
                <div class="proname van-multi-ellipsis--l2">
                    {{ item.proname }}
                </div>
                <div class="price">{{ item.originprice }}</div>
            </div>
        </li>
        <!-- 换视图 -->
        <div class="changeIcon" @click="num = num == 1 ? 2 : 1">
            <van-icon name="apps-o" size="30" v-if="num == 1" />
            <van-icon name="bars" size="30" v-else />
        </div>
    </ul>
</template>
<script>
import Vue from "vue";
import { Image as VanImage } from "vant";

Vue.use(VanImage);

export default {
    data() {
        return {
            num: 1,
        };
    },
    methods: {
        toDetail(proId) {
            // 通过js进行路由跳转
            this.$router.push("/detail/" + proId);

            //   this.$router.push({
            //     path: "/detail/" + proId,
            //   });
        },
    },
    //  接收数据
    props: {
        proList: {
            // 类型
            type: [Array, Object],
            // require 设置必传项
            require: true,
        },
    },
};
</script>
<style scoped>
/* 左边 图 ， 右边 文 */
.cols_1 .proItem {
    height: 1rem;
    display: flex;
    padding-left: 10px;
}

.cols_1 .proItem .itemImage {
    width: 1rem;
    height: 1rem;
    border: 1px solid#cccccc;
}

.cols_1 .proItem .itemImage .van-image img {
    width: 0.94rem;
    height: 0.94rem;
    margin: 0.03rem;
    display: block;
    border: 1px solid#f66;
    box-sizing: border-box;
}

.cols_1 .proItem .itemInfo {
    flex: 1;
    height: 1rem;
    padding: 5px 10px;
}

.cols_1 .proItem .itemInfo .proname {
    font-size: 14px;
}

.cols_1 .proItem .itemInfo .price {
    color: #f66;
}

/* 上图 下文 */
.cols_2 {
    display: flex;
    flex-wrap: wrap;
    padding-left: 10px;
}

.cols_2 .proItem {
    width: 48%;
    height: 3px 1%;
}

.cols_2 .proItem .itemImage {
    width: 100%;
    height: 1.7rem;
}

.cols_2 .proItem .itemImage .van-image {
    width: 98%;
    height: 100%;
}

.cols_2 .proItem .itemImage .van-image img {
    width: 100%;
    height: 100%;
    display: block;
}

.cols_2 .proItem .itemInfo {
    padding: 3px 10px;
}

.cols_2 .proItem .itemInfo .proname {
    font-size: 14px;
}

.cols_2 .proItem .price {
    color: #f66;
}

/* 点击切换 */
.changeIcon {
    position: fixed;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #cccccc;
    background-color: #fff;
    display: flex;
    justify-self: center;
    align-items: center;
    bottom: 60px;
    right: 10px;
}

.changeIcon {
    padding-left: 2px;
    padding-top: 2px;
    box-sizing: border-box;
}
</style>
